<template>
    <view class="return-visit-item">
        <view class="content">
            <view class="top">
                <text class="header-name">{{ item.RealName }}</text>
                <text class="header-time">{{ item.AddTime }}</text>
            </view>
            <view class="desc"><text>回访内容：</text>{{ item.Content }}</view>
            <view class="imglist flex-v-c clearfix" v-if="item.Images">
                <image
                    :src="image"
                    :data-src="image"
                    :data-i="index"
                    v-for="(image, i) in easyImgList(item.Images)"
                    :key="i"
                    @tap="previewImage"
                    mode="aspectFill"></image>
            </view>
            <view class="map"><image src="/static/img/map.png"></image>{{ item.Addres }}</view>
        </view>
    </view>
</template>

<script>
export default {
    components: {},
    props: {
        item: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {}
    },
    methods: {
        goDetail() {},
        previewImage(e) {
            var current = e.target.dataset.src
            let index = e.target.dataset.i
            uni.previewImage({
                current: current,
                urls: this.easyImgList(this.item.Images),
            })
        },
    },
}
</script>

<style lang="scss">
.top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.return-visit-item {
    padding: $app-page-padding;
    margin: 0 $app-page-padding;
    margin-bottom: 20rpx;
    display: flex;
    flex-direction: column;
    background: $color-white;
    border-radius: 8rpx;

    .header-name {
        font-weight: 700;
        font-size: $font-size-32;
        color: $app-color-main;
    }

    .content {
        font-size: 24rpx;
        color: $color-gray-2;
        .content-text {
            line-height: 32rpx;
        }
        .desc {
            font-size: 28rpx;
            color: $color-gray-1;
            padding: 10rpx 0;
            text {
                font-weight: bold;
            }
        }
    }
    .imglist {
        display: flex;
        flex-wrap: wrap;
        padding: 10rpx 0;
        image {
            width: 120rpx;
            height: 120rpx;
            margin-right: 10rpx;
            margin-bottom: 10rpx;
            border-radius: 8rpx;
        }
    }
    .header-time {
        color: $color-gray-3;
        font-size: 28rpx;
    }
}
.map {
    display: flex;
    color: $color-gray-3;
    font-size: 20rpx;
    justify-content: flex-start;
    align-items: center;
    image {
        width: 24rpx;
        height: 24rpx;
        margin-right: 8rpx;
    }
}
</style>
